<template>
	<view class="search-container" v-show="visible" ref="dialog">
		<!-- 搜索头部 -->
		<view class="search-head">
			<view class="back" @click="closeDialog"><image src="@/static/approval/back.png" mode=""></image></view>
			<view class="search-input">
				<view class="search-icon"><image src="@/static/approval/look.png" mode=""></image></view>
				<input type="text" placeholder="请输入" v-model="keywords" @input="doSearch" placeholder-style="font-size: 24upx" />
			</view>
			<view class="search-more" @click="doSearch">搜索</view>
		</view>


		<!-- 搜索历史 -->
		<view class="search-history common-content" v-if="searchHistory.length > 0">
			<view class="history-title">
				<view class="common-title">历史搜索</view>
				<image src="@/static/approval/delete.png" mode="" @click="deleteHistory"></image>
			</view>
			<view class="history-value common-value">
				<text v-for="(item, index) in searchHistory" :key="index" @click="doSearchHistory(item)">{{ item }}</text>
			</view>
		</view>
		
		<!-- 搜索内容 -->
		<view class="search-content" v-if="items.length > 0">
			<scroll-view scroll-y="true" class="search-value-box">
				<view class="search-value-item" v-for="(item, index) in items" :key="index">
					<text v-if="item.id == ''">{{ item.title }}</text>
					<text v-else @click="chooseItem(item)">{{ item.title ? item.title : item.realname }}</text>
				</view>
			</scroll-view>
		</view>
		<view class="search-content" v-else>
			<slot name="empty">
				 <van-empty description="暂无记录" />
			</slot>
		</view>

	</view>
</template>

<script>
import request from '@/utils/sun.js';

export default {
	name: 'HsSearch',
	props: {
		// visible: {
		// 	type: Boolean,
		// 	default: false
		// },
		appendToBody: false,
		getSelected: Function
	},
	data() {
		return {
			visible: false,
			keywords: '',
			cacheKey: '',
			searchType: '',
			requestApi: '',

			// 接口返回的搜索内容
			items: [],
			// 搜索历史
			searchHistory: []
		};
	},
	watch: {
		visible(val) {
			if (val) {
				this.$el.addEventListener('scroll', this.updatePopper);
				this.$nextTick(() => {
					this.$refs.dialog.scrollTop = 0;
				});
				if (this.appendToBody) {
					document.body.appendChild(this.$el);
				}
			} else {
				this.$el.removeEventListener('scroll', this.updatePopper);
				if (this.destroyOnClose) {
					this.$nextTick(() => {
						this.key++;
					});
				}
			}
		}
	},
	methods: {
		showSearchDialog(searchType) {
			this.searchType = searchType;
			switch (this.searchType) {
				case 'hotel':
					this.cacheKey = 'searchHotelHistory';
					this.requestApi = '/api/dictionary.hotel/index';
					break;
				case 'user':
					this.cacheKey = 'searchUserHistory';
					this.requestApi = '/api/ucenter.user/index';
					break;
				case 'car':
					this.cacheKey = 'searchCarHistory';
					this.requestApi = '/api/dictionary.car/index';
					break;
			}
			this.getUserSearchHistory(); 
			// this.$emit("update:visible", true)
			this.visible = true;
		},

		// 获取用户搜索历史
		getUserSearchHistory() {
			console.log(this.cacheKey, this.searchHistory);
			if (!this.cacheKey) return false;
			
			let cacheKey = this.cacheKey;
			let that = this;
			uni.getStorage({
				key: cacheKey,
				success(res) {
					that.searchHistory = res.data;
				},
				fail(e) {}
			});
		},
		doSearch(e) {
			let url = this.requestApi;
			let keywords = this.keywords;
			let that = this;
			setTimeout(function() {
				request.request({
					url: url,
					token: true,
					data: { keywords: keywords },
					success(res) {
						if (res.code == 200 || res.code == 0) {
							that.items = res.data.list;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
						}
					},
					fail(e) {
						uni.showToast({
							icon: 'none',
							title: '请求失败，请稍后重试'
						});
					}
				});
			}, 500);
		},
		doSearchHistory(e) {
			this.keywords = e;
			this.doSearch();
		},
		// 清除历史搜索
		deleteHistory() {
			this.searchHistory = [];
			uni.removeStorage({
				key: this.cacheKey
			});
		},
		storeHistoryItem(value) {
			let that = this;
			let index = that.searchHistory.indexOf(value);
			if (index != -1) {
				that.searchHistory.splice(index, 1);
			}
			if (that.searchHistory.length == 5) {
				that.searchHistory.pop();
				that.searchHistory.unshift(value);
			} else {
				that.searchHistory.unshift(value);
			}
			
			uni.setStorage({
				key: this.cacheKey,
				data: that.searchHistory
			});
		},
		// 选择返回
		chooseItem(item) {
			if (typeof this.getSelected === 'function') {
				this.getSelected(item);
				// this.$emit("update:visible", false);
				this.visible = false;
				this.storeHistoryItem(item.title);
			} else {
				uni.showToast({
					icon: "none",
					title: "类型错误"
				})
			}
		},
		// 关闭
		closeDialog() {
			this.visible = false;
		}
	},
	destroyed() {
		if (this.appendToBody && this.$el && this.$el.parentNode) {
			this.$el.parentNode.removeChild(this.$el);
		}
	}
};
</script>

<style lang="less">
.search-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: auto;
	padding: 24upx;
	box-sizing: border-box;
	z-index: 1000;
	background-color: #fff;
	.search-head {
		display: flex;
		align-items: center;

		.back {
			margin-right: 16upx;
			width: 40upx;
			height: 40upx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.search-input {
			position: relative;
			padding-left: 32upx;
			flex: 1;
			display: flex;
			align-items: center;
			height: 60upx;
			background-color: #f1f1f1;
			border-radius: 15px;

			.search-icon {
				width: 28upx;
				height: 28upx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			input {
				padding-left: 32upx;
				flex: 1;
				height: 100%;
				font-size: 28upx;
			}
		}

		.search-more {
			flex: 0 10%;
			margin-left: 24upx;
			font-size: 24upx;
		}
	}

	.search-history {
		.history-title {
			display: flex;

			.common-title {
				flex: 1;
			}

			image {
				width: 30upx;
				height: 30upx;
			}
		}
	}

	.search-content {
		padding: 20upx;
		width: 90%;
		height: 90%;
		overflow: auto;
		background-color: #ffffff;
		z-index: 10;

		.search-value-box {
			font-size: 28upx;
			color: #818181;

			.search-value-item {
				padding: 20upx 0;
				border-bottom: 1upx solid #f0f0f0;
			}
		}
	}

	// 公有样式
	.common-content {
		padding-top: 38upx;
		font-size: 24upx;

		.common-title {
			font-weight: 600;
		}

		.common-value {
			padding-top: 24upx;
			line-height: 1.5rem;

			text {
				padding: 8upx 24upx;
				background-color: rgba(248, 248, 248, 1);
				border-radius: 15px;
			}
		}
	}
}
</style>
